<!DOCTYPE html>

<html>
<head>

<title>Example 3: Server Overlays </title>

<!-- Maps API script SRC-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>  
<script src="js/arcgislink.js" type="text/javascript"></script>

<script type="text/javascript">
/*
	Exercise 3, Step 1: Add .js reference, ArcGIS Server overlay, and geocoder
*/
var map = null;
var dynamap, res;
var geocoder;
var marker = new google.maps.Marker();

//Load up the map
function initialize() {
	geocoder = new google.maps.Geocoder();
  	var myLatLng = new google.maps.LatLng(46.5, -94.0);
  	var myOptions = {
	  zoom: 6,
	  center: myLatLng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};
    map = new google.maps.Map(document.getElementById("map"), myOptions);
	var url = 'http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Population_Density/MapServer'; 
	var agsType = new gmaps.ags.MapType(url,{name:'arcgis', opacity:0.5});
	map.overlayMapTypes.insertAt(0, agsType);
	
	dynamap = new gmaps.ags.MapService(url);

} 

function codeAddress(address) {
	if (address) {
	    geocoder.geocode( { 'address': address}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
			map.fitBounds(results[0].geometry.viewport);
			marker.setMap(null);
			marker.setMap(map);
			marker.setPosition(results[0].geometry.location);
			marker.setDraggable(true);

			var myaddHtml = "Address Found: " +
results[0].formatted_address;
			document.getElementById("dResults").innerHTML = myaddHtml;
			identify(results[0].geometry.location);
			
	      } else {
		  document.getElementById("dResults").innerHTML = "Err:"+ status;
	      }
	    });
	} else {
		alert("Please enter something into the search box.");
	}
}

function identify(latLng){
	  if (res) res.length = 0;
	  dynamap.identify({
            geometry : latLng,
            tolerance : 3,
            layerIds : [ 2 ],
            layerOption : 'all',
            bounds : map.getBounds(),
            width: map.getDiv().offsetWidth,
            height: map.getDiv().offsetHeight,
            overlayOptions: [],
			returnGeometry: false
          }, function (idresults, err){
            if (err) {
              alert(err.message + err.details.join('\n'));
            } else {
			  parseJSON(idresults);
            }
          });
}

function parseJSON(idresults) {
	var demoN = "Tract Name: ";
	var demoT = "Total Population: ";
	var demoS = "Population Density: ";
	
  res = idresults.results;
  layersJSON = { "2": []}; 
  for (var i = 0; i < res.length; i++) {
	var thisrec = res[i];
    layersJSON[thisrec.layerId].push(thisrec);
  }
	var lyr2 = layersJSON[2];

	switch(lyr2.length) {
	case 1:	
		var attributes = lyr2[0].feature.attributes;
		document.getElementById("demoName").innerHTML = demoN + attributes["Name"];
		document.getElementById("demoTotalPop").innerHTML = demoT + attributes["2010 Total Population"];
		document.getElementById("demoPopDens").innerHTML = demoS + attributes["2010 Population Density (Pop per sq mile)"];
		document.getElementById("other").innerHTML = "";
		break;
	case 0:
		var othrHTML = "No demographics found in this area. Try zooming, or dragging the marker in the map to a new location.";
		document.getElementById("other").innerHTML = othrHTML;
		document.getElementById("demoName").innerHTML = "";
		document.getElementById("demoTotalPop").innerHTML = "";
		document.getElementById("demoPopDens").innerHTML = "";
		break;
	default:
		var othrHTML = "There are "+lyr2.length+" records in the result. Try dragging the marker until you have only one record.";
		document.getElementById("other").innerHTML = othrHTML;
		document.getElementById("demoName").innerHTML = "";
		document.getElementById("demoTotalPop").innerHTML = "";
		document.getElementById("demoPopDens").innerHTML = "";
		break;
	}
	
}


</script>



</head>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map, #side {
    float: left;
  }
 #side {
  margin-right: 5px;
  padding: 2px 4px;
  text-align: right;
  width: 210px;
  }
  #map {
  width: 750px;
  height: 600px;
  }
</style>
<body onload="initialize()">


<div id="side">
	<div id="frmBox">
	<form action="" onsubmit="codeAddress(this.geocodeTextBox.value); return false;" method="post" name="frmGeocode" accept-charset="utf-8">
		<p>Address, City, or Zip:
		<input id="geocodeTextBox" type="text" name="geocode"/>
		</p>
		<p><input id="btnFind" type="submit" value="Find"/></p>
	</form>
</div>

	<p>
		<em id="dResults"></em><br /><br />
		<strong id="demoName"></strong><br />
		<strong id="demoTotalPop"></strong><br />
		<strong id="demoPopDens"></strong><br />
		<em id="other"></em>
	</p>
</div>
  

  
  <div id="map">
  	<noscript><p align="center"><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      <br/>However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript>
  </div>


</body>
</html>
